<template>
	<view :style="{'--color':color}">
	
		<view class="p-re" v-if="info.video && info.free == 1 || info.video && info.is_buy == 1">
			<video :src="info.video"
				  :autoplay="autoplay"
				  object-fit="fill" 
				  id="myVideo" 
				  class="videoBox"
				  :initial-time="info.chapter_play_time"
				  :poster="$imgUrls(info.img)"
				  @ended="ended"
				  @timeupdate="timeupDate">
				  <!--  假水印 -->
				  <cover-view class="horizontal d-flex a-center" > 
				      <cover-image :src="imgUrl+logo" class="watermark_logo" ></cover-image>
				  	<cover-view class="tipInfo">
				  		<cover-view class="white h7" v-if="userInfo">{{userInfo.nickname}}</cover-view>
				  		<cover-view class="white h7 m-top6">{{vid}}</cover-view>
				  	</cover-view>
				  	
				  </cover-view>
			</video>
				
		</view>
		<image :src="$imgUrls(info.img)" mode="widthFix" class="rows" v-else></image>
		
		
		<view class="bgwhite d-flex  padding30">
			<view class="flex-1 d-flex f-column">
				<view class="rows color_33 size30">{{info.chapter_title}}</view>
				<view class="row a-center color_66 m-top20">
					<view class="iconfont icon-bofang3 size30 "></view>
					<text class="size28 m-left10">{{info.play}}</text>
					<text class="h6 color m-left30" v-if="info.expire_at">有效期:{{info.expire_at}}</text>
				</view>
			</view>
			<view class="d-flex f-column a-center m-left20" @click="show = true">
				 <view class="speed p-re ">
					 <image :src="$online('speed.png')" mode="widthFix" class="rows"></image>
					 <text class="speedNum color_33 h7">{{speed}}X</text>
				 </view>
				 <text class="color_33 h7 m-top10">倍速选择</text>
			</view>
		</view>
		
		
		<u-popup :show="show"
		         mode="bottom" 
				 :round="10" 
				 closeable 
				 bgColor="#ffffff"
				 @close="show = false"
				 :closeOnClickOverlay="false">
				 <view class="row padding30">
					 <view class="color_33 size30 bold m-bot20">倍速播放{{speed}}X</view>
					 <view class="row j-sb p-top20 p-bot20 bot_bor" 
					       v-for="(item,index) in speedList" :key="index"
						   @click="playbackRateBtn(item)">
						 <text class="color_33 h6">{{item}}X</text>
						 <view class="select flexac" :class="{'selActive':item == speed}">
							 <view class="iconfont icon-xuanzhong h7 white"></view>
						 </view>
					 </view>
				 </view>
		</u-popup>
		
		
		
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		name:"playVideo",
		props:['pageData'],
		data() {
			return {
				imgUrl:this.imgUrl,
				speed:1.0,
				speedList:['0.5','0.8','1.0','1.25','1.5'],
				show:false,
				initialTime:0,
				info:'',
				autoplay:false,
			};
		},
		created() {
			this.videoContext = uni.createVideoContext('myVideo',this);
		},
		mounted() {
			
		},
		methods:{
			...mapMutations(['setChapter_id','setCurrent']),
			playbackRateBtn(item){
				this.speed = parseFloat(item);
				this.videoContext.playbackRate(this.speed);
				this.show = false;
			},
		
			
			ended(){
				this.$saveChap(this.pageData.chapter_id,this.pageData.seconds);
			},
			timeupDate(e){
				this.setCurrent(e.detail.currentTime)
			},
			
			
		},
		computed:{
			...mapState(['vid','bid','color','current','chapterId','logo','userInfo']),
		},
		watch:{
			pageData:{
				deep:true,
				immediate:true,
				handler(newVal){
					if(!newVal) return;
					if(newVal.chapter_id != this.chapterId){
						this.setCurrent(0);
						this.setChapter_id(newVal.chapter_id);
						this.info = this.pageData;
						this.autoplay = true;
						return;
					}
					if(this.current != 0) this.pageData.chapter_play_time = this.current;
					this.info = this.pageData;
				}
			},
			
		}
	}
</script>


<style lang="scss" scoped>
	.videoBox{
		width:100%;
		height: 440rpx;
	}
	.speed{
		width:58rpx;
	}
	.speedNum{
		position: absolute;
		right: -20rpx;
		top:-20rpx;
	}
	.select{
		width:24rpx;
		height: 24rpx;
		border-radius: 50%;
		overflow: hidden;
		border:1px solid #666666;
	}
	.selActive{
		border:1px solid var(--color);
		background-color: var(--color);
	}
	.watermark{
		position: absolute;
		top:20rpx;
		left:20rpx;
		color:#ffffff;
	}
	.watermark_logo{
		width:40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		opacity: 0.5;
	}
	.horizontal{
		position: fixed;
		top:30rpx;
		right:50rpx;
		z-index:99999;
		background-color: rgba(0, 0, 0, 0.1);
		padding:10rpx;
		border-radius: 10rpx;
	}
	.tipInfo{
		display: flex;
		flex-direction: column;
		opacity: 0.5;
	}
</style>